<template>
  <div>
    <Title title="创建试题"/>
    <el-form
      :model="ruleForm"
      status-icon
      ref="ruleForm"
      label-width="180px"
    >
      <el-form-item label="题干: " prop="name" >
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="选项: " required>
        <div class="item fx" style="margin-top: 40px">
          <span class="char">A</span>
          <el-input placeholder="请输入选项A" v-model="options.A"></el-input>
        </div>
        <div class="item fx">
          <span class="char">B</span>
          <el-input placeholder="请输入选项B" v-model="options.B"></el-input>
        </div>
        <div class="item fx">
          <span class="char">C</span
          ><el-input placeholder="请输入选项C" v-model="options.C"></el-input>
        </div>
        <div class="item fx">
          <span class="char">D</span>
          <el-input placeholder="请输入选项D" v-model="options.D"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="标准答案: " required prop="radio">
        <el-radio v-model="ruleForm.radio" label="A">A</el-radio>
        <el-radio v-model="ruleForm.radio" label="B">B</el-radio>
        <el-radio v-model="ruleForm.radio" label="C">C</el-radio>
        <el-radio v-model="ruleForm.radio" label="D">D</el-radio>
      </el-form-item>
       <el-form-item label="解析: " prop="analysis" >
        <el-input type='textarea' v-model="ruleForm.analysis"></el-input>
      </el-form-item>
      <el-form-item label="分数: " required="">
        <el-input-number
          v-model="num"
          :min="1"
          :max="20"
          label="描述文字"
        ></el-input-number>
      </el-form-item>
      <el-form-item label-width="180px">
        <el-button @click="submit" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { error, success, info, warn } from "@/utils";
import { addSubject } from "@/api/paper";
import Title from '@/components/common/Title'
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        radio: "A",
        analysis: ""
      },
      num: 10,
      options: {
        A: "",
        B: "",
        C: "",
        D: "",
      },
    };
  },
  components: {
    Title
  },
  methods: {
    async submit() {
      const name = this.ruleForm.name;
      const score = this.num;
      const ans = this.ruleForm.radio;
      const options = this.options;
      const analysis = this.ruleForm.analysis
      if (!name) return warn("请填写题目名");
      for (let item in options) {
        if (!options[item]) return warn("请填写完整选项" + item);
      }
      // 添加题目
      const res = await addSubject({ name, score, ans, options, analysis });
      if (res.code === 1) {
        success(res.msg);
        this.reset();
      } else {
        error(res.msg);
      }
    },
    /**
     * 重置
     */
    reset() {
      this.ruleForm.name = "";
      this.options = {
        A: "",
        B: "",
        C: "",
        D: "",
      };
      this.num = 10;
      this.ruleForm.analysis = ""
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  margin: 10px 0;
  .char {
    margin-right: 10px;
  }
}
</style>
